<p><a href="https://material.angular.io/cdk/overlay/overview">https://material.angular.io/cdk/overlay/overview  官网说明文档</a></p>
<button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isModalOpen = !isModalOpen">自定义弹窗</button>
<ng-template
    cdk-connected-overlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayWidth]="500"
    cdkConnectedOverlayHasBackdrop
    [cdkConnectedOverlayOpen]="isModalOpen"
    [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
    (backdropClick)="toggleModal()"
>
    <div class="sp-modal" cdkDrag>
        <div class="modal-header">
            <button (click)="isModalOpen = !isModalOpen">x</button>
        </div>
        <div class="modal-content">
            <span>自定义弹窗</span>
        </div>
        <div class="modal-footer">
            <button (click)="isModalOpen = !isModalOpen" type="primary">确认</button>
        </div>
    </div>
</ng-template>
<div>
  这里假装很多数据模拟页面滚动效果
  <p *ngFor="let i of items">{{i}}</p>
</div>
